<template>
	<view class="container">
		<view class="form-section">
			<view class="form-item">
				<text class="icon">📱</text>
				<input 
					type="number"
					v-model="form.phone"
					placeholder="请输入手机号"
					maxlength="11"
					/>
			</view>
			
			<view class="form-item verification">
				<text class="icon">🔑</text>
				<input 
					type="number"
					v-model="form.code"
					placeholder="请输入验证码"
					maxlength="6"
				/>
				<text 
					class="send-code"
					:class="{ disabled: counting }"
					@click="handleSendCode"
				>
					{{ counting ? `${countdown}s` : '获取验证码' }}
				</text>
			</view>
			
			<view class="form-item">
				<text class="icon">🔒</text>
				<input 
					:type="showPassword ? 'text' : 'password'"
					v-model="form.password"
					placeholder="请设置新密码"
					maxlength="20"
				/>
				<text class="eye-icon" @click="showPassword = !showPassword">
					{{ showPassword ? '👁️' : '👁️‍🗨️' }}
				</text>
			</view>
			
			<view class="form-item">
				<text class="icon">🔒</text>
				<input 
					:type="showConfirmPassword ? 'text' : 'password'"
					v-model="form.confirmPassword"
					placeholder="请确认新密码"
					maxlength="20"
				/>
				<text class="eye-icon" @click="showConfirmPassword = !showConfirmPassword">
					{{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
				</text>
			</view>
		</view>
		
		<view class="tips">
			<text>密码由6-20位字母、数字或符号组成</text>
		</view>
		
		<button 
			class="submit-btn"
			:disabled="!canSubmit"
			:class="{ disabled: !canSubmit }"
			@click="handleReset"
		>
			重置密码
		</button>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

const form = ref({
	phone: '',
	code: '',
	password: '',
	confirmPassword: ''
})

const showPassword = ref(false)
const showConfirmPassword = ref(false)
const counting = ref(false)
const countdown = ref(60)

// 验证手机号格式
const isValidPhone = computed(() => {
	return /^1[3-9]\d{9}$/.test(form.value.phone)
})

// 验证密码格式
const isValidPassword = computed(() => {
	return /^.{6,20}$/.test(form.value.password)
})

// 验证表单是否可提交
const canSubmit = computed(() => {
	return isValidPhone.value && 
		form.value.code && 
		isValidPassword.value && 
		form.value.password === form.value.confirmPassword
})

// 发送验证码
const handleSendCode = () => {
	if (counting.value || !isValidPhone.value) return
	
	counting.value = true
	countdown.value = 60
	
	const timer = setInterval(() => {
		countdown.value--
		if (countdown.value <= 0) {
			clearInterval(timer)
			counting.value = false
		}
	}, 1000)
	
	// 模拟发送验证码
	uni.showToast({
		title: '验证码已发送',
		icon: 'success'
	})
}

// 处理重置密码
const handleReset = () => {
	if (!canSubmit.value) return
	
	if (form.value.password !== form.value.confirmPassword) {
		uni.showToast({
			title: '两次密码不一致',
			icon: 'none'
		})
		return
	}
	
	// 模拟重置密码过程
	uni.showLoading({
		title: '重置中...'
	})
	
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({
			title: '重置成功',
			icon: 'success'
		})
		
		setTimeout(() => {
			uni.redirectTo({
				url: '/pages/login/index'
			})
		}, 1500)
	}, 2000)
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #fff;
	padding: 40rpx;
}

.form-section {
	margin-bottom: 30rpx;
	
	.form-item {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		padding: 20rpx 0;
		margin-bottom: 30rpx;
		
		.icon {
			font-size: 40rpx;
			margin-right: 20rpx;
		}
		
		input {
			flex: 1;
			font-size: 32rpx;
		}
		
		.eye-icon {
			font-size: 40rpx;
			padding: 0 20rpx;
		}
		
		&.verification {
			.send-code {
				font-size: 28rpx;
				color: #4A90E2;
				padding: 0 20rpx;
				
				&.disabled {
					color: #999;
				}
			}
		}
	}
}

.tips {
	margin-bottom: 30rpx;
	
	text {
		font-size: 24rpx;
		color: #999;
	}
}

.submit-btn {
	background-color: #4A90E2;
	color: #fff;
	border-radius: 45rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	
	&.disabled {
		background-color: #ccc;
	}
}
</style> 